<template>
    <div>
        <div class="container">
            <el-page-header @back="goBack" content="入库订单详情"></el-page-header>

            <el-descriptions class="e-m-t-45" :column="2" title="订单信息" border :labelStyle="{ width: '120px' }">
                <el-descriptions-item label="订单ID">{{ form.number }}</el-descriptions-item>
                <el-descriptions-item label="订单状态">
                    <span class="color-success" v-if="form.state == '已入库'">{{ form.state }}</span>
                    <span class="color-warning" v-else-if="form.state == '待入库'">{{ form.state }}</span>
                    <!-- <span class="color-danger" v-else="form.state == '已取消'">{{form.state}}</span> -->
                    <span v-else class="color-danger">{{ form.state }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="下单时间">{{ form.createddatetime }}</el-descriptions-item>
                <el-descriptions-item label="入库时间">{{ form.storagetime || '--' }}</el-descriptions-item>
                <el-descriptions-item label="订单金额">{{ form.userorderamount }}</el-descriptions-item>
                <el-descriptions-item label="核定金额">{{ form.orderamount }}</el-descriptions-item>

                <!-- <el-descriptions-item >
                    <template slot="label" >
                        <div class="cell-item">
                            <el-popover
                                placement="top-start"
                                title="佣金计算方法"
                                width="200"
                                trigger="hover"
                                content="佣金=小哥所属级别佣金% x 回收订单金额">
                                <div slot="reference">佣金<i class="el-icon-warning"></i></div>
                            </el-popover>
                            <div>佣金</div>
                        </div>
                    </template>
                    {{ form.commission }}

                </el-descriptions-item>
                <el-descriptions-item label="罚金">{{ form.fine }}</el-descriptions-item>
                <el-descriptions-item label="折损率">
                    <span v-if="form.lossratio > 0">{{ form.lossratio }}%</span>
                    <span v-else="form.lossratio <= 0">0%</span>
                </el-descriptions-item> -->
                <el-descriptions-item label="站点名称">
                    {{form.store.name}}
                </el-descriptions-item>
                <!-- <el-descriptions-item label="站点地址">
                    <i class="el-icon-location"></i><span>{{form.store.address}}</span>
                </el-descriptions-item> -->
                <el-descriptions-item label="负责小哥" :span="2">
                    <span>{{form.brother.name}}</span>
                    <span class="e-p-l-10">{{form.brother.mobile }}</span>
                </el-descriptions-item>
                <el-descriptions-item v-if="form.remarks" label="入库单备注" :span="2">{{ form.remarks }}</el-descriptions-item>
            </el-descriptions>
            <h4>关联订单</h4>
            <div>
                <el-table :data="form.userorders" stripe border style="width: 100%">
                    <el-table-column
                        fixed
                        prop="number"
                        label="订单ID"
                        >
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="rowClick(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- <h4>入库拍照</h4>
            <div class="flex">
                <el-image class="img" v-for="(item, index) in form.brotherpic" :key="index"
                    style="width: 150px; height: 150px" :src="fileURL + item" fit="cover"
                    :preview-src-list="[fileURL + form.brotherpic[index]]">
                </el-image>
            </div> -->
            <el-form label-width="160px" class="e-m-t-45">
                <!-- <el-form-item label="站点">
                    <span>{{form.store.name}}</span>
                </el-form-item> -->
                <template v-if="form.make.length > 0">
                    <h4>订单明细</h4>
                    <el-table border :span-method="objectSpanMethod" :data="retrievetableData" style="width: 100%">
                        <el-table-column prop="large" label="类型">
                        </el-table-column>
                        <el-table-column prop="typenames" label="可回收物">
                        </el-table-column>
                        <el-table-column prop="price" label="单价" v-if="form.state == '已入库'">
                            <template slot-scope="scope">
                                <span>{{ scope.row.price }}{{ scope.row.isweighing?'元/KG':'元/件' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="weight" label="数量" v-if="form.state == '已入库'">
                            <template slot-scope="scope">
                                <span>{{ scope.row.approvedweight }}{{ scope.row.isweighing?'KG':'件' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="amount" label="合计(元)" v-if="form.state == '已入库'">
                        </el-table-column>
                        <el-table-column prop="originalweight" label="原数量" v-if="form.state == '待入库'">
                            <template slot-scope="scope">
                                <span>{{ scope.row.originalweight }}{{ scope.row.isweighing?'KG':'件' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="approvedweight" label="核实数量" v-if="form.state != '待入库'">
                            <template slot-scope="scope">
                                <span>{{ scope.row.approvedweight }}{{ scope.row.isweighing?'KG':'件' }}</span>
                            </template>
                        </el-table-column>
                        <!-- <el-table-column prop="diff" label="差额" v-if="form.state != '待入库'">
                            <template slot-scope="scope">
                                <span>{{ scope.row.diff }}{{ scope.row.isweighing?'KG':'件' }}</span>
                            </template>
                        </el-table-column> -->
                        <el-table-column prop="typeremarks" label="备注">
                            <template slot-scope="scope">
                                <span>{{ scope.row.typeremarks }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="total">
                        <span>共有{{ retrievetableData.length }}种品类</span><span v-if="form.state == '已入库'">，总计价值：<span class="bold">￥{{ form.orderamount }}</span></span>
                    </div>
                </template>

                <el-form-item label-width="0" class="e-m-t-30">
                    <el-button @click="goBack">返回</el-button>
                    <!-- <el-button type="danger" @click="showcancel = true">取消订单</el-button> -->
                </el-form-item>
            </el-form>
        </div>
        <!-- 取消理由 -->
		<el-dialog title="取消订单" :visible.sync="showcancel" width="30%">
			<el-input type="textarea" :rows="5" placeholder="请输入取消订单的理由" v-model="textarea" maxlength="200">
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showcancel = false">取消</el-button>
				<el-button type="primary" @click="cancelOrderSubmit">确定</el-button>
			</span>
		</el-dialog>
        <!-- 详情页面弹窗(客户回收订单) -->
		<el-drawer
			title=""
			:visible.sync="viewShow.show"
			direction="rtl"
			size="80%"
			:with-header="false"
            :append-to-body="true"
			>
			<userOrderViews v-if="viewShow.show" :id="viewShow.id" @goBack="viewShow.show = false"></userOrderViews>
		</el-drawer>
    </div>
</template>

<script>
import userOrderViews from '@/components/order-user-list/userOrderViews.vue'
export default {
    layout: 'admin',
    components: {
        userOrderViews
    },
    head() {
        return {
            title: '入库订单详情' 
        }
    },
    props:{
        id: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            // 客户回收订单
			viewShow:{
				id: 0,
				show: false //详情页面弹窗
			},
            retrievetableData: [],
            form: {
                address: {},
                estimated: [],
                details: [],
                store: {},
                make: [],
                brother:{}
            },
            loading: false,
            // activeNames: []
            showcancel: false,
            textarea: ''
        }
    },
    mounted() {
        this.getDetails(this.id)
    },
    methods: {
        rowClick(row){
			this.viewShow.id = row.id
            this.viewShow.show = true
		},
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            let mergeLength = 1;//需要进行横纵合并的列
            if (columnIndex < mergeLength) {
                let finArray = [1, 1];
                // 处理行数据
                console.log(Object.keys(row))
                let cgname = Object.keys(row)[3]
                if (rowIndex === 0 || row[cgname] !== this.retrievetableData[rowIndex - 1][cgname]) {
                    let rowspan = 1;
                    //计算需要进行合并操作的行
                    for (let i = 0; i < this.retrievetableData.length - 1; i++) {
                        // 只合并连续的
                        if (this.retrievetableData[i][cgname] === row[cgname] && this.retrievetableData[i + 1][cgname] === row[cgname]) {
                            rowspan++;
                        }
                    }
                    finArray[0] = rowspan;
                } else {
                    finArray[0] = 0;
                }
                return finArray
            }
        },
        goBack() {
            this.$emit('goBack')
        },
        getDetails(id) {//小哥
            this.retrievetableData = []
            let api = ''
            this.$axios.get('/Store/InOrder/Details?id=' + id).then((res) => {
                this.form = res
                
                // if(this.form.state == '待入库'){
                    this.form.make.forEach((item, index) => {
                        // console.log(item,"==>item", index ,'===>index')
                        item.details.forEach((i, x) => {
                            let obj = {}
                            obj.amount = i.amount
                            obj.typenames = i.productname
                            obj.typepath = i.typepath
                            obj.large = item.names
                            obj.bigid = item.id
                            obj.approvedweight = i.approvedweight
                            obj.originalweight = i.originalweight
                            // obj.diff = i.diff
                            obj.isweighing = i.isweighing
                            obj.price = i.price
                            obj.typeremarks = i.typeremarks?i.typeremarks:'/'
                            this.retrievetableData.push(obj)
                        })
                    })

                    console.log('this.retrievetableData',this.retrievetableData)
                // }

                // if(this.form.state == '已入库'){
                //     this.form.detail.forEach((item, index) => {
                //         // console.log(item,"==>item", index ,'===>index')
                //         item.details.forEach((i, x) => {
                //             let obj = {}
                //             obj.amount = i.amount
                //             obj.typenames = i.productname
                //             obj.typepath = i.typepath
                //             obj.typeremarks = i.typeremarks
                //             obj.large = item.names
                //             obj.bigid = item.id
                //             obj.approvedweight = i.approvedweight
                //             obj.originalweight = i.originalweight
                //             obj.diff = i.diff
                //             obj.isweighing = item.isweighing
                //             this.retrievetableData.push(obj)
                //         })
                //     })
                // }

                // this.form.make.forEach((item, index) => {
                //     this.activeNames.push(index)
                // })
            })
        },
        cancelOrderSubmit() {
			this.$axios.post('/Store/InOrder/Cancel', {
				id: this.id,
				reason: this.textarea,
			}).then((res) => {
				this.$message({
					type: 'success',
					message: res.msg
				});
				this.showcancel = false;
				this.textarea = "";
                this.getDetails(this.id)
			})
		},
        goOrderView(id){
            this.$router.push({
                path: '/order/user/Views?id='+id
            })
        },
        goLog() {
            this.$router.push({
                path: 'log'
            })
        },
        onSubmit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    // this.$axios.post('/admin/modifypwd', this.form).then((res) => {
                    //     this.$alert('密码修改成功, 请重新登录！', '提示', {
                    //         confirmButtonText: '确定',
                    //         showClose: false,
                    //         callback: action => {
                    //             if (process.client) {
                    //                 localStorage.removeItem('lifeData')
                    //             }
                    //             this.$router.push({
                    //                 path:'/login'
                    //             })
                    //         }
                    //     });
                    // })
                } else {
                    return false;
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.img {
    border-radius: 5px;
    margin-right: 15px;
}

.total {
    text-align: right;
    padding-top: 10px;
    color: var(--gray);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .bold {
        font-weight: bold;
        font-size: 18px;
        color: var(--orange);
    }
}
</style>
